<!DOCTYPE html>
<html>
<head>
    <title> {$site_info.site_name|default=''}</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}"/>
    <meta name="description" content="{$site_info.site_seo_description|default=''}">
    <include file="public@head"/>
    <hook name="before_head_end"/>
</head>
<body class="page-index">
<div class="container">
    <include file="public@nav"/>

    <div class="contents apply applyZc">
        <div class="blockSty">
            <div class="applyTitle">
                <div class="zcTitle">志愿者注册——使用手机号</div>
            </div>
            <div class="zcContent">
                <!--<form class="layui-form mmxgBlock" action="{:url('portal/User/doRegister')}" method="post">-->
                 <form class="layui-form mmxgBlock"  id="form">
                    <input type="hidden" name="org_id" value="{$org_id|default=''}">
                    <!--<div class="layui-form-item">-->
                        <!--<label class="layui-form-label">姓名:</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="layui-form-item">-->
                        <!--<label class="layui-form-label">性别:</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="radio" name="sex" value="1" title="男" checked>-->
                            <!--<input type="radio" name="sex" value="2" title="女">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">设置密码:</label>-->
                    <!--<div class="layui-input-block">-->
                    <!--<input type="text" name="title" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">-->
                    <!--</div>-->
                    <!--</div>-->

                    <div class="layui-form-item">
                        <label class="layui-form-label">手&nbsp;&nbsp;&nbsp;&nbsp;机&nbsp;&nbsp;&nbsp;&nbsp;号:</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" style="width: 83%"  id="js-mobile-input" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input  yzmInput">
                        </div>
                    </div>

                    <!--<div class="layui-form-item">-->
                        <!--<label class="layui-form-label">验&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;&nbsp;码:</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="captcha" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input yzmInput">  <captcha height="38" width="160" font-size="20"/>-->

                        <!--</div>-->
                    <!--</div>-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机验证码:</label>
                        <div class="layui-input-block">
                            <input type="text" name="code" required  lay-verify="required" placeholder="请输入手机验证码" autocomplete="off" class="layui-input yzmInput"><a class="layui-btn btn btn-success js-get-mobile-code code "
                                                                                                                                                                           style="width: 163px;background: #f2914a" id="code"
                                                                                                                                                                           data-wait-msg="[second]秒后才能再次获取" data-mobile-input="#js-mobile-input"
                                                                                                                                                                           data-url="{:url('portal/phonecode/send')}"
                                                                                                                                                                           daty-type="register"data-init-second-left="60">获取手机验证码</a>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
                        <div class="layui-input-block">
                            <input type="text" name="password" style="width: 83%" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="nextBtn">

                        <button type="button" class="layui-btn btn-primary btn-block Btn" style="width: 190px;">注册</button>
                        <a href="{:url('login')}">
                            <span class="layui-btn" style="width: 190px">已注册，去登录</span>
                        </a>
                    </div>
                </form>
            </div>
        </div>

    </div>



    <include file="public@footer"/>
    <!-- /container -->
    <include file="public@scripts"/>
    <script>

    </script>
    <hook name="before_body_end"/>
</body>
<script>

    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(formSub)', function(data){
            layer.msg(JSON.stringify(data.field));
        });
    });
    $(function() {

        var code = true; //表示验证码已经发送
        $('#code').click(function() {
            var $val = $('#js-mobile-input').val(); //
            var reg = /^1\d{10}$/; //电话号码验证规则
            var that = $(this);
            if($val.length == 0 || !reg.test($val)) { //如果电话号码为空或者电话号码输入不正确
                layer.msg("手机号不能为空！"); //提示信息
                return false;
            }
            if(reg.test($val)) { //如果电话号码输入正确，则验证码发送成功，倒计时开始
                console.log($val)
                console.log(code)
                if (code) {
                $.ajax({
                    url: "/portal/Phonecode/send",
                    data: {mobile: $val},
                    success: function (data) {
                        //console.log(data)
                        var timer = 60;

                            //                if(code) {
                            layer.msg("验证码发送成功");
                            code = false;//表示当验证码发送完成后，发送按钮不可点击
                            var n = setInterval(function () {
                                timer--;
                                that.text(timer + 's后重新发送');
                                if (timer == 0) {
                                    clearInterval(n);
                                    code = true;//当倒计时为0时，即可重新发送验证码
                                    that.text('重新发送验证码')
                                }
                            }, 1000)
                        }

                })
                }
//                var timer = 60;
//                if(code) {
//                    layer.msg("验证码发送成功");
//                    code = false;//表示当验证码发送完成后，发送按钮不可点击
//                    var n = setInterval(function() {
//                        timer--;
//                        that.text(timer + 's后重新发送');
//                        if(timer == 0) {
//                            clearInterval(n);
//                            code = true;//当倒计时为0时，即可重新发送验证码
//                            that.text('重新发送验证码')
//                        }
//                    }, 1000)
//                }
            }
        });
        layui.use(['form','layer'], function(){
            var form = layui.form
                    ,layer = layui.layer;
            $(".Btn").click(function () {
                var data=$('#form').serialize()
                $.ajax({
                    type: "post",
                    url: "/portal/user/doRegister",
                    data: data,
                    dataType: "json",
                    success: function(res) {
                        console.log(res)
                        layer.msg(res.msg)
                        if(res.code!=0){
                            setTimeout(function(){ window.location.href = res.url; }, 2000);
                        }
                    }

                })
            });

        })
    })

</script>
</html>

